import { defineStore } from "pinia";
import { ref } from "vue";
import { IChartLayer, IListColumn } from "./types";

export const useChartStore = defineStore("chart", () => {
  const chartLayers = ref<IChartLayer[]>([]);

  const screenWidth = ref(window.innerWidth);
  const screenHeight = ref(window.innerHeight);

  // 百分比计算函数
  const calculateYPercentage = (pixelValue: number) => {
    return `${((pixelValue / screenHeight.value) * 100).toFixed(2)}%`;
  };

  const calculateXPercentage = (pixelValue: number) => {
    return `${((pixelValue / screenWidth.value) * 100).toFixed(2)}%`;
  };

  // 监听窗口大小变化，更新屏幕高度
  const updateScreenSize = () => {
    screenWidth.value = window.innerWidth;
    screenHeight.value = window.innerHeight;
    // 如果需要在屏幕大小变化时重新计算所有图表位置，可以在这里调用initChartLayers
    initChartLayers();
  };

  // 初始化时添加事件监听
  if (typeof window !== "undefined") {
    window.addEventListener("resize", updateScreenSize);
  }

  const listColumns: IListColumn[] = [
    { label: "级别", prop: "level", width: "10%" },
    { label: "实体Id", prop: "entityId", width: "20%" },
    { label: "内容", prop: "content", width: "20%" },
    { label: "时间", prop: "time", width: "50%" },
  ];

  const initChartLayers = () => {
    // 初始化位置变量
    let currentY = 0;
    let currentX = 0;

    // 第一个组件
    const component1: IChartLayer = {
      id: "1",
      name: "导弹参数",
      type: "collapse",
      position: {
        x: calculateXPercentage(currentX),
        y: calculateYPercentage(currentY),
      },
      size: {
        width: "450",
        height: "260",
      },
    };

    // 更新累计高度
    currentY += 260 + 10; // height + gap

    // 第二个组件
    const component2: IChartLayer = {
      id: "2",
      name: "速度报表",
      type: "table",
      position: {
        x: calculateXPercentage(currentX),
        y: calculateYPercentage(currentY),
      },
      size: {
        width: "450",
        height: "290",
      },
      data: {
        headerName: "GEO_Drifiting",
        list: [
          {
            label: "Time(UTCG)",
            value: "2025-05-07 12:00:00",
          },
          {
            label: "x(千米)",
            value: "-1435.1254126",
            isSelect: true,
          },
          {
            label: "y(千米)",
            value: "1235.1254126",
          },
          {
            label: "z(千米)",
            value: "1235.1254126",
          },
          {
            label: "vx(千米/秒)",
            value: "1235.1254126",
          },
          {
            label: "vy(千米/秒)",
            value: "1235.1254126",
          },
          {
            label: "vz(千米/秒)",
            value: "1235.1254126",
          },
        ],
      },
    };

    // 继续更新累计高度
    currentY += 290 + 10;

    // 第三个组件
    const component3: IChartLayer = {
      id: "3",
      name: "燃料与温度",
      type: "table",
      position: {
        x: calculateXPercentage(currentX),
        y: calculateYPercentage(currentY),
      },
      size: {
        width: "450",
        height: "132",
      },
      data: {
        headerName: "GEO_Drifiting",
        list: [
          {
            label: "燃料质量",
            value: "4872",
          },
          {
            label: "平均温度",
            value: "58",
          },
        ],
      },
    };

    // 继续更新累计高度
    currentY += 132 + 10;

    // 第四个组件
    const component4: IChartLayer = {
      id: "4",
      name: "消息",
      type: "list",
      position: {
        x: calculateXPercentage(currentX),
        y: calculateYPercentage(currentY),
      },
      size: {
        width: "450",
        height: "345",
      },
      data: {
        listColumns,
        listItems: [
          {
            id: "1",
            level: "A",
            entityId: "GEO_Drifiting",
            content: "链路已建立",
            time: "2025-05-07 12:00:00",
          },
          {
            id: "2",
            level: "B",
            entityId: "GEO_Drifiting",
            content: "链路已建立",
            time: "2025-05-07 12:00:00",
          },
          {
            id: "3",
            level: "B",
            entityId: "GEO_Drifiting",
            content: "链路已建立",
            time: "2025-05-07 12:00:00",
          },
          {
            id: "4",
            level: "B",
            entityId: "GEO_Drifiting",
            content: "链路已建立",
            time: "2025-05-07 12:00:00",
          },
          {
            id: "5",
            level: "B",
            entityId: "GEO_Drifiting",
            content: "链路已建立",
            time: "2025-05-07 12:00:00",
          },
          {
            id: "6",
            level: "B",
            entityId: "GEO_Drifiting",
            content: "链路已建立",
            time: "2025-05-07 12:00:00",
          },
          {
            id: "7",
            level: "B",
            entityId: "GEO_Drifiting",
            content: "链路已建立",
            time: "2025-05-07 12:00:00",
          },
        ],
      },
    };

    // 继续更新累计高度
    currentY += 115 + 10;
    currentX += 450 + 10;

    // 第五个组件
    const component5: IChartLayer = {
      id: "5",
      name: "燃料质量",
      type: "gauge",
      position: {
        x: calculateXPercentage(currentX),
        y: calculateYPercentage(currentY),
      },
      size: {
        width: "220",
        height: "220",
      },
    };

    // 更新x坐标
    currentX += 220 + 10;

    // 第六个组件
    const component6: IChartLayer = {
      id: "6",
      name: "平均温度",
      type: "thermometer",
      position: {
        x: calculateXPercentage(currentX),
        y: calculateYPercentage(currentY),
      },
      size: {
        width: "220",
        height: "220",
      },
    };

    currentX += 220 + 10;

    // 第七个组件
    const component7: IChartLayer = {
      id: "7",
      name: "燃料质量",
      type: "line",
      position: {
        x: calculateXPercentage(currentX),
        y: calculateYPercentage(currentY),
      },
      size: {
        width: "500",
        height: "220",
      },
    };

    // 继续更新累计高度
    currentX += 500 + 10;

    // 第八个组件
    const component8: IChartLayer = {
      id: "8",
      name: "燃料质量",
      type: "line",
      position: {
        x: calculateXPercentage(currentX),
        y: calculateYPercentage(currentY),
      },
      size: {
        width: "500",
        height: "220",
      },
    };

    // 继续更新累计高度
    // currentX += 220 + 10;

    // 第九个组件
    // const component9: IChartLayer = {
    //   id: "9",
    //   name: "其他数据",
    //   type: "bar",
    //   position: {
    //     x: calculateXPercentage(currentX),
    //     y: calculateYPercentage(currentY),
    //   },
    //   size: {
    //     width: "200",
    //     height: "220",
    //   },
    // };

    // 将所有组件添加到数组
    chartLayers.value = [
      component1,
      component2,
      component3,
      component4,
      component5,
      component6,
      component7,
      component8,
      // component9,
    ];
  };

  const initChartLayersOld = () => {
    chartLayers.value = [
      {
        id: "1",
        name: "导弹参数",
        type: "collapse",
        position: {
          x: 0,
          y: 0,
        },
        size: {
          width: "450",
          height: "260",
        },
      },
      {
        id: "2",
        name: "速度报表",
        type: "table",
        position: {
          x: 0,
          y: "30%",
        },
        size: {
          width: "450",
          height: "290",
        },
        data: {
          headerName: "GEO_Drifiting",
          list: [
            {
              label: "Time(UTCG)",
              value: "2025-05-07 12:00:00",
            },
            {
              label: "x(千米)",
              value: "-1435.1254126",
              isSelect: true,
            },
            {
              label: "y(千米)",
              value: "1235.1254126",
            },
            {
              label: "z(千米)",
              value: "1235.1254126",
            },
            {
              label: "vx(千米/秒)",
              value: "1235.1254126",
            },
            {
              label: "vy(千米/秒)",
              value: "1235.1254126",
            },
            {
              label: "vz(千米/秒)",
              value: "1235.1254126",
            },
          ],
        },
      },
      {
        id: "3",
        name: "燃料与温度",
        type: "table",
        position: {
          x: 0,
          y: 570,
        },
        size: {
          width: "450",
          height: "132",
        },
        data: {
          headerName: "GEO_Drifiting",
          list: [
            {
              label: "燃料质量",
              value: "4872",
            },
            {
              label: "平均温度",
              value: "58",
            },
          ],
        },
      },
      {
        id: "4",
        name: "消息",
        type: "list",
        position: {
          x: 0,
          y: 712,
        },
        size: {
          width: "450",
          height: "115",
        },
        data: {
          listColumns,
          listItems: [
            {
              id: "1",
              level: "A",
              entityId: "GEO_Drifiting",
              content: "链路已建立",
              time: "2025-05-07 12:00:00",
            },
            {
              id: "2",
              level: "B",
              entityId: "GEO_Drifiting",
              content: "链路已建立",
              time: "2025-05-07 12:00:00",
            },
          ],
        },
      },
      {
        id: "5",
        name: "燃料质量",
        type: "gauge",
        position: {
          x: 0,
          y: 837,
        },
        size: {
          width: "220",
          height: "220",
        },
      },
      {
        id: "6",
        name: "平均温度",
        type: "thermometer",
        position: {
          x: 230,
          y: 837,
        },
        size: {
          width: "220",
          height: "220",
        },
      },
      {
        id: "7",
        name: "燃料质量",
        type: "line",
        position: {
          x: 460,
          y: 837,
        },
        size: {
          width: "1000",
          height: "220",
        },
      },
      {
        id: "8",
        name: "其他数据",
        type: "bar",
        position: {
          x: 1470,
          y: 837,
        },
        size: {
          width: "200",
          height: "220",
        },
      },
      {
        id: "9",
        name: "其他数据",
        type: "bar",
        position: {
          x: 1680,
          y: 837,
        },
        size: {
          width: "200",
          height: "220",
        },
      },
    ];
  };

  // 在销毁时移除事件监听
  const cleanup = () => {
    if (typeof window !== "undefined") {
      window.removeEventListener("resize", updateScreenSize);
    }
  };

  return {
    chartLayers,
    initChartLayers,
    cleanup,
  };
});
